<template>
  <div>
    <a-drawer
      class="_form"
      :title="title"
      :width="500"
      :maskClosable="false"
      :visible="visible"
      @close="onClose"
    >
      <a-form-model ref="form" layout="vertical" :model="form" :rules="rules">
        <a-form-model-item label="菜单名称" prop="name">
          <a-input v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item label="类型" prop="type">
          <a-radio-group v-model="form.type" @change="typeCheck = form.type">
            <a-radio value="M">菜单</a-radio>
            <a-radio value="B">按钮</a-radio>
            <a-radio value="V">页面</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="上级菜单" prop="pid">
          <a-tree-select
            v-model="form.pid"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="请选择上级菜单"
            allow-clear
          >
            <!-- 目前最多显示3级菜单 -->
            <a-tree-select-node key="0" value="0" title="根目录">
              <template v-for="item in allList">
                <a-tree-select-node
                  :key="item.id"
                  :value="item.id"
                  :title="item.name"
                >
                  <a-tree-select-node
                    v-for="node in item.children"
                    :key="node.id"
                    :value="node.id"
                    :title="node.name"
                  >
                    <a-tree-select-node
                      disabled
                      v-for="node2 in node.children"
                      :key="node2.id"
                      :value="node2.id"
                      :title="node2.name"
                    >
                    </a-tree-select-node>
                  </a-tree-select-node>
                </a-tree-select-node>
              </template>
            </a-tree-select-node>
          </a-tree-select>
        </a-form-model-item>
        <a-form-model-item label="图标" prop="icon">
          <!-- <a-input v-model="form.icon" @click="openIcon">
            <i slot="addonAfter" v-if="form.icon.includes('icon-')" class="iconfont" :class="form.icon" />
            <a-icon slot="addonAfter" v-else :type="form.icon" />
          </a-input> -->
          <a-input v-model="form.icon" />
        </a-form-model-item>
        <a-form-model-item label="路由标识" prop="path">
          <a-input v-model="form.path" />
        </a-form-model-item>
        <a-form-model-item
          v-if="form.type != 'V'"
          label="权限标识"
          prop="perms"
        >
          <a-input v-model="form.perms" />
        </a-form-model-item>
        <a-form-model-item label="排序" prop="sortNo">
          <a-input-number
            :min="1"
            :max="999"
            v-model="form.sortNo"
            :formatter="limit"
          />
        </a-form-model-item>
        <a-form-model-item label="状态" prop="enabled">
          <a-radio-group v-model="form.enabled">
            <a-radio
              v-for="item in enabledArr"
              :key="item.value"
              :value="item.value"
              >{{ item.label }}</a-radio
            >
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
      <iconList @pickIcon="pickIcon"></iconList>
      <div class="drawer-bottom">
        <a-space>
          <a-button class="nbcs-btn-default" @click="onClose">
            取消
          </a-button>
          <a-button class="nbcs-btn-main-bg" @click="edit">
            确定
          </a-button>
        </a-space>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import moment from "moment";
import { getAll, add, update, findById } from "@/services/menu";
import iconList from "./iconList";
import { limitNumber } from "@/utils/common";
export default {
  name: "ResourceForm",
  components: { iconList },
  data() {
    return {
      type: "0", //0添加，1编辑
      title: "",
      form: {
        name: "",
        type: "M",
        pid: "",
        icon: " ",
        path: "",
        perms: "",
        sortNo: 999,
        enabled: 1
      },
      visible: false,
      typeCheck: "",
      rules: {
        name: [
          { required: true, message: "菜单名称不能为空", trigger: "change" }
        ],
        type: [{ required: true, message: "类型必选", trigger: "change" }],
        pid: [
          { required: true, message: "上级菜单不能为空", trigger: "change" }
        ],
        path: [
          { required: true, message: "路由标识不能为空", trigger: "change" }
        ],

        sortNo: [
          { required: true, message: "排序值不能为空", trigger: "blur" }
        ],
        enabled: [{ required: true, message: "状态不能为空", trigger: "blur" }]
      },
      allList: [],
      enabledArr: [
        { value: 1, label: "正常" },
        { value: 0, label: "禁用" }
      ]
    };
  },
  watch: {
    typeCheck(newVal) {
      this.$refs["form"].clearValidate(["perms", "path"]);
      if (newVal == "M") {
        this.rules = {
          name: [
            { required: true, message: "菜单名称不能为空", trigger: "change" }
          ],
          type: [{ required: true, message: "类型必选", trigger: "change" }],
          pid: [
            { required: true, message: "上级菜单不能为空", trigger: "change" }
          ],
          path: [
            { required: true, message: "路由标识不能为空", trigger: "change" }
          ],
          sortNo: [
            { required: true, message: "排序值不能为空", trigger: "blur" }
          ],
          enabled: [
            { required: true, message: "状态不能为空", trigger: "blur" }
          ]
        };
      } else if (newVal == "B") {
        this.rules = {
          name: [
            { required: true, message: "菜单名称不能为空", trigger: "change" }
          ],
          type: [{ required: true, message: "类型必选", trigger: "change" }],
          pid: [
            { required: true, message: "上级菜单不能为空", trigger: "change" }
          ],
          perms: [
            { required: true, message: "权限标识不能为空", trigger: "change" }
          ],
          sortNo: [
            { required: true, message: "排序值不能为空", trigger: "blur" }
          ],
          enabled: [
            { required: true, message: "状态不能为空", trigger: "blur" }
          ]
        };
      } else if (newVal == "V") {
        this.rules = {
          name: [
            { required: true, message: "菜单名称不能为空", trigger: "change" }
          ],
          type: [{ required: true, message: "类型必选", trigger: "change" }],
          pid: [
            { required: true, message: "上级菜单不能为空", trigger: "change" }
          ],
          path: [
            { required: true, message: "路由标识不能为空", trigger: "change" }
          ],
          sortNo: [
            { required: true, message: "排序值不能为空", trigger: "blur" }
          ],
          enabled: [
            { required: true, message: "状态不能为空", trigger: "blur" }
          ]
        };
      }
    }
  },
  computed: {},
  created() {
    this.$bus.$on("resourceVisible", val => {
      this.visible = val.state;
      this.type = val.action;
      this.title = val.action ? "编辑菜单" : "新增菜单";
      console.log(val.data);
      getAll().then(res => {
        if (res.data.code == 0) {
          this.allList = res.data.data;
          if (this.type) {
            findById({ id: val.data.row.id }).then(res => {
              if (res.data.code == 0) {
                this.form = res.data.data;
                this.form.enabled = this.form.enabled == true ? 1 : 0;
              }
            });
          } else {
            console.log(this.allList);
            if (val.data.pid) {
              findById({ id: val.data.pid }).then(res => {
                if (res.data.code == 0) {
                  this.form.pid = res.data.data.id;
                  console.log(this.form.pid);
                }
              });
            } else {
              this.form.pid = "0";
            }
          }
        }
      });
    });
  },
  destroyed() {
    this.$bus.$off("resourceVisible");
  },
  methods: {
    moment,
    limit(value) {
      return limitNumber(value);
    },
    initData() {
      this.form = {
        name: "",
        type: "M",
        pid: "",
        icon: " ",
        path: "",
        perms: "",
        sortNo: 999,
        enabled: 1
      };
    },
    onClose() {
      this.visible = false;
      this.$refs["form"].clearValidate();
      this.initData();
    },
    openIcon() {
      this.$bus.$emit("iconListVisible", { state: true });
    },
    edit() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return false;
        }
        //编辑
        if (this.type) {
          update(this.form).then(res => {
            if (res.data.code === 0) {
              this.$message.success("修改成功");
              this.$emit("getList", { data: this.form, isEdit:true });
              this.onClose();
            }
          });
        }
        //添加
        else {
          add(this.form).then(res => {
            if (res.data.code === 0) {
              this.$message.success("添加成功");
              this.$emit("getList", { data: this.form, isEdit:false });
              this.onClose();
            }
          });
        }
      });
    },

    //选择图标
    pickIcon(data) {
      this.form.icon = data.name;
      this.$forceUpdate();
    }
  }
};
</script>

<style lang="less" scoped>
.ant-form-item {
  font-size: 13px;
}
.mid {
  position: relative;
  top: 5px;
}
</style>
